<template>
  <div>
    <el-card>
      <el-form
        :inline="true"
        :model="form"
        class="demo-form-inline"
        label-position="right"
        ref="ruleFormRef"
        :rules="rules"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="栏目" prop="column" name="column" required>
              <!-- <el-select
                v-model="form.column"
                clearable
                placeholder="请选择栏目"
                style="width: 240px"
              >
                <el-option
                  v-for="item in columnOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select> -->
              <el-tree-select
                v-model="form.column"
                :data="columnOption"
                check-strictly
                :render-after-expand="false"
                style="width: 240px"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="更新子栏目" prop='subcolumn'>
              <el-radio-group v-model="form.subcolumn">
                <el-radio value="0" size="large">是</el-radio>
                <el-radio value="1" size="large">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="button_row">
          <el-col :span="24">
            <el-form-item>
              <el-button type="primary" @click="oncolumnHtml(ruleFormRef)">
                生成栏目页HTML
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script  setup>
import { ref, reactive } from 'vue'
import { useStore } from 'vuex'
import { getColumnTree } from '@/api/column/columnList.js'
import { getColumnStatic } from '@/api/config/staticize.js'
import { ElMessage } from 'element-plus'
const ruleFormRef = ref()
const store = useStore()
const userId = store.state.app.user.id
const form = ref({
  column: '',
  subcolumn: '0'
})
const columnOption = ref([])
const rules = reactive({
  column: [{ required: true, message: '请选择栏目', trigger: 'change' }]
})
const getList = () => {
  const params = { root: 'source', userId: userId }
  getColumnTree({ root: params.root, userId: params.userId }).then((res) => {
    const dataList = []
    Object.keys(res.data.map).map((item) => {
      dataList.push({
        value: item,
        label: `${res.data.map[item][0]}`
      })
    })
    const result = [{ value: '0', label: '栏目根目录', children: dataList }]
    columnOption.value = result
  })
}
// 生成栏目页html
const oncolumnHtml = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      getColumnStatic({
        channelId: form.value.column === '0' ? '' : form.value.column,
        containChid: form.value.subcolumn === '0'
      }).then((res) => {
        ElMessage.success(res.message)
        console.log(res)
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
getList()
</script>

<style lang="scss" scoped>
.el-card {
  min-height: 600px;
}
.button_row {
  text-align: center;
  margin-top: 30px;
}
</style>
